<template>
  <div class="chunk1">
    <lineEcahrts
      :compositionName="compositionName"
      :indexs="indexs"
      :userId="userId"
      :startTime="dates[0]"
      :endTime="dates[1]"
      :oldDate="dates"
      :id="id"
      :navActive="navActive"
      :one_contrastOptions_list="one_contrastOptions_list"
      :more_chart1_nav_list2="more_chart1_nav_list2"
      :chart1List.sync="chart1List"
      @beyondIncome2Change="(val) => $emit('beyondIncome2Change', val)"
    ></lineEcahrts>
    <riskTable
      ref="riskTable"
      :id="id"
      :userId="userId"
      :compositionName="compositionName"
      :navActive="navActive"
      :indexs="indexs"
      :startTime="dates[0]"
      :endTime="dates[1]"
      :combTreeArr.sync="combTreeArr"
      :combTreeStrategyListArr.sync="combTreeStrategyListArr"
      :contrastOptObj="contrastOptObj"
    ></riskTable>
    <earnTable
      ref="earnTable"
      :navActive="navActive"
      :compositionName="compositionName"
      :startTime="dates[0]"
      :endTime="dates[1]"
      :chart1List="chart1List"
      :contrastOptObj="contrastOptObj"
      :combTree="combTreeArr"
      :combTreeStrategyList="combTreeStrategyListArr"
      :one_contrastOptions_list="one_contrastOptions_list"
      :id="id"
      :userId="userId"
    ></earnTable>
    <netWorthTable
      :id="id"
      :userId="userId"
      :compositionName="compositionName"
      :navActive="navActive"
    ></netWorthTable>
  </div>
</template>

<script>
import lineEcahrts from './lineEcahrts.vue'
import riskTable from './riskTable.vue'
import earnTable from './earnTable.vue'
import netWorthTable from './netWorthTable.vue'

export default {
  components: { lineEcahrts, riskTable, earnTable, netWorthTable },
  props: {
    id: {
      type: String | Number,
      default: '',
    },
    userId: {
      type: String | Number,
    },
    navActive: {
      type: String | Number,
    },
    compositionName: {
      type: String | Number,
      default: '',
    },
    indexs: {
      type: Object | Array,
    },
    dates: {
      type: Object | Array,
    },
    more_chart1_nav_list2: {
      type: Object | Array,
    },
    one_contrastOptions_list: {
      type: Object | Array,
    },
    contrastOptObj: {
      type: Object | Array,
    },
  },
  watch: {
    navActive: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          console.log(this.combTreeArr)
          this.$refs.earnTable.earnTableInit()
        })
      },
    },
    chart1List: {
      handler(newVal, oldVal) {
        this.$refs.riskTable.riskTableInit(newVal)
      },
    },
    combTreeArr: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.$refs.earnTable.earnTableInit()
        }
      },
    },
  },
  data() {
    return {
      chart1List: [],
      combTreeArr: [],
      combTreeStrategyListArr: [],
    }
  },
  methods: {},
}
</script>

<style></style>
